<template>
  <div class='product-commont'>
    <ul>
      <li v-for="(item, index) in listData" :key="index">
        <div class="pic-box">
          <img :src="item.headpic" alt="">
          <p class="mt5 white-space">{{item.realName}}</p>
        </div>
        <div class="commont-info">
          <el-rate :value="item.grade"></el-rate>
          <p class="content color-666">
            {{item.comment }}
          </p>
          <p class="more-info color-999 ft12">
            <span class="time">时间：2018-10-12</span>
            <span>型号：{{item.type }}</span>
            <span>颜色：{{item.color }}</span>
          </p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      listData:[
        {
          pic:require('@/assets/imgs/center/default_user.jpg'),
        },{}
      ]
    };
  },
  methods: {
      init(id){
          let params = {
              id:id,
              currPageNo:1,
              pageSize:10
          }
          _g.apiPost('product/productComments',params).then(res=>{
              if(res.status == 0){
                  this.$set(this,"listData",res.data.list)
              }else{
                  _g.toMessage(res)
              }
          })
      }
  },
  created() {
      let id = this.$router.history.current.query.id
      this.init(id)
  }
};
</script>
<style lang="scss" scoped>
.product-commont {
  li{
    padding: 20px;
    display: flex;
    border-bottom: 1px solid #f2f2f2;

    .pic-box{
      width: 100px;
      text-align: center;

      img{
        width: 45px;
        height: 45px;
        border-radius: 50%;
        margin: 0 auto;
      }
    }
    .commont-info{
      .content{
        margin: 15px 0;
      }
    }
  }
}
</style>